import { contractDelete, contractList, projectDelete, projectList } from '@/services/chargingManage';
import { Button, Input, message, Modal, Table } from 'antd';
import React from 'react';
import { formatMessage } from 'umi-plugin-react/locale';
import ContractModal from './contractModal';
import ProjectModal from './projectModal';

class ManageList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      list: [],
      total: 0,
      current: 1,
      size: 10,
      type: '',
      search: '',
    };
  }

  componentDidMount() {
    this.setState(
      {
        type: this.props.type,
      },
      () => {
        this.getList();
      }
    );
  }

  getList = () => {
    this.setState(
      {
        loading: true,
      },
      async () => {
        const { current, size, search } = this.state;
        const { enterpriseId } = this.props;
        let res = {};
        if (this.state.type === 'contract') {
          res = await contractList({ current, size, enterpriseId, search });
        } else {
          res = await projectList({ current, size, enterpriseId, search });
        }

        this.setState({
          list: res.records,
          total: res.total,
          loading: false,
        });
      }
    );
  };

  openModal = (id) => {
    if (this.state.type === 'contract') {
      this.ContractModal.initModal(id);
    } else {
      this.ProjectModal.initModal(id);
    }
  };

  deleteConfirm = (id) => {
    Modal.confirm({
      title: formatMessage({ id: 'manageList.confirm.deleteTitle' }),
      okText: formatMessage({ id: 'manageList.confirm.ok' }),
      cancelText: formatMessage({ id: 'manageList.confirm.cancel' }),
      okType: 'danger',
      onOk: () => {
        this.doDelete(id);
      },
    });
  };

  doDelete = async (id) => {
    let res = {};
    if (this.state.type === 'contract') {
      res = await contractDelete({ id });
    } else {
      res = await projectDelete({ id });
    }

    if (res.code === -1) {
      return false;
    }

    message.info(res.message);
    this.getList();
  };

  doSearch = (current, size) => {
    this.setState({ current, size }, () => {
      this.getList();
    });
  };

  render() {
    const { list, total, current, size, loading, type, search } = this.state;
    const { enterpriseId, readonly } = this.props;
    const columnsContract = [
      {
        title: formatMessage({ id: 'manageList.contract.columns.name' }),
        dataIndex: 'name',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.contract.columns.startDate' }),
        dataIndex: 'startTime',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.contract.columns.endDate' }),
        dataIndex: 'endTime',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.contract.columns.signDate' }),
        dataIndex: 'signTime',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.contract.columns.type' }),
        dataIndex: 'typeStr',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.contract.columns.region' }),
        dataIndex: 'regionStr',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.columns.action' }),
        width: 120,
        render: (text, row) => {
          return (
            <div>
              <Button type='primary' size='small' onClick={() => this.openModal(row.id)} style={{ marginRight: 8 }}>
                {formatMessage({ id: 'manageList.button.edit' })}
              </Button>
              <Button type='danger' size='small' onClick={() => this.deleteConfirm(row.id)}>
                {formatMessage({ id: 'manageList.button.delete' })}
              </Button>
            </div>
          );
        },
      },
    ];

    const columnsProject = [
      {
        title: formatMessage({ id: 'manageList.project.columns.name' }),
        dataIndex: 'name',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.project.columns.productName' }),
        dataIndex: 'productNameId',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.project.columns.contract' }),
        dataIndex: 'contractStr',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.project.columns.consultant' }),
        dataIndex: 'consultants',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.project.columns.planStart' }),
        dataIndex: 'planStartTime',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.project.columns.planEnd' }),
        dataIndex: 'planEndTime',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.project.columns.realStart' }),
        dataIndex: 'realStartTime',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.project.columns.realEnd' }),
        dataIndex: 'realEndTime',
        width: 100,
      },
      {
        title: formatMessage({ id: 'manageList.project.columns.operate' }),
        width: 120,
        dataIndex: 'option2',
        render: (text, row) => {
          return (
            <div>
              <Button type='primary' size='small' onClick={() => this.openModal(row.id)} style={{ marginRight: 8 }}>
                {formatMessage({ id: 'manageList.button.edit' })}
              </Button>
              <Button type='danger' size='small' onClick={() => this.deleteConfirm(row.id)}>
                {formatMessage({ id: 'manageList.button.delete' })}
              </Button>
            </div>
          );
        },
      },
    ];

    const columns = type === 'contract' ? columnsContract : columnsProject;

    return (
      <div>
        {readonly ? (
          ''
        ) : (
          <div className='topOptionBox'>
            <Input.Search
              placeholder={formatMessage({ id: 'manageList.search.placeholder' })}
              value={search}
              onChange={(e) => this.setState({ search: e.target.value })}
              onSearch={() => this.doSearch(1, size)}
              style={{ width: 200 }}
            />
            <Button type='primary' onClick={() => this.openModal()}>
              {formatMessage({ id: 'manageList.button.add' })}
            </Button>
          </div>
        )}
        <Table
          loading={loading}
          columns={readonly ? columns.filter((item) => item.title != formatMessage({ id: 'manageList.project.columns.operate' })) : columns}
          dataSource={list}
          rowKey={'id'}
          scroll={{ x: 'auto' }}
          pagination={{
            total,
            current,
            pageSize: size,
            onChange: this.doSearch,
          }}
        />

        <ContractModal onRef={(ref) => (this.ContractModal = ref)} refreshList={this.getList} enterpriseId={enterpriseId} readonly={readonly} />
        <ProjectModal onRef={(ref) => (this.ProjectModal = ref)} refreshList={this.getList} enterpriseId={enterpriseId} readonly={readonly} />
      </div>
    );
  }
}

export default ManageList;
